<template>
  <view class="pet-view">
    <!-- 宠物列表 -->
    <view class="pet-list" v-if="currentPets.length > 0">
      <view 
        v-for="pet in currentPets" 
        :key="pet.id"
        class="pet-card"
        @tap="selectPet(pet)"
      >
        <view class="pet-avatar">
          <text class="pet-emoji">{{ pet.type === 'cat' ? '🐱' : '🐶' }}</text>
        </view>
        <view class="pet-info">
          <text class="pet-name">{{ pet.name }}</text>
          <view class="pet-stats">
            <text class="stat">❤️ {{ pet.health }}</text>
            <text class="stat">🍖 {{ pet.hunger }}</text>
            <text class="stat">😊 {{ pet.happiness }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <text class="empty-text">还没有宠物哦</text>
    </view>

    <!-- 添加宠物按钮 -->
    <view class="add-pet-btn" @tap="showPetShop">
      <text class="add-icon">+</text>
      <text class="add-text">领养新宠物</text>
    </view>

    <!-- 宠物商店弹窗 -->
    <view class="pet-shop-modal" v-if="showShop">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">领养宠物</text>
          <text class="close-btn" @tap="hideShop">×</text>
        </view>
        <view class="pet-types">
          <view 
            class="pet-type-item"
            v-for="type in petTypes"
            :key="type.id"
            @tap="selectPetType(type)"
          >
            <text class="pet-emoji">{{ type.emoji }}</text>
            <text class="pet-type-name">{{ type.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PetView',
  
  data() {
    return {
      showShop: false,
      currentPets: [],
      petTypes: [
        { id: 1, type: 'cat', name: '猫咪', emoji: '🐱' },
        { id: 2, type: 'dog', name: '小狗', emoji: '🐶' }
      ]
    }
  },

  created() {
    this.loadPets()
  },

  methods: {
    loadPets() {
      const savedPets = uni.getStorageSync('pets') || []
      this.currentPets = savedPets
    },

    showPetShop() {
      this.showShop = true
    },

    hideShop() {
      this.showShop = false
    },

    selectPetType(type) {
      uni.showModal({
        title: '给宠物起个名字',
        editable: true,
        placeholderText: '请输入宠物名字',
        success: (res) => {
          if (res.confirm && res.content) {
            this.adoptPet(type, res.content)
          }
        }
      })
    },

    adoptPet(type, name) {
      const newPet = {
        id: Date.now(),
        type: type.type,
        name,
        health: 100,
        hunger: 100,
        happiness: 100
      }
      
      this.currentPets.push(newPet)
      uni.setStorageSync('pets', this.currentPets)
      this.hideShop()
      
      uni.showToast({
        title: '领养成功！',
        icon: 'success'
      })
    },

    selectPet(pet) {
      uni.navigateTo({
        url: `/pages/pet/detail?id=${pet.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.pet-view {
  position: relative;
  min-height: calc(100vh - 44px);
}

.pet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 16px;
}

.pet-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  .pet-avatar {
    text-align: center;
    margin-bottom: 12px;
    
    .pet-emoji {
      font-size: 48px;
    }
  }
  
  .pet-info {
    text-align: center;
    
    .pet-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
    }
    
    .pet-stats {
      display: flex;
      justify-content: center;
      gap: 8px;
      
      .stat {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  
  .empty-text {
    color: #999;
    font-size: 16px;
  }
}

.add-pet-btn {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(76,175,80,0.3);
  
  .add-icon {
    font-size: 20px;
  }
  
  .add-text {
    font-size: 16px;
  }
}

.pet-shop-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .modal-content {
    background: white;
    border-radius: 16px;
    width: 80%;
    max-width: 320px;
    padding: 24px;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .modal-title {
      font-size: 18px;
      font-weight: 500;
    }
    
    .close-btn {
      font-size: 24px;
      color: #999;
      padding: 4px;
    }
  }
  
  .pet-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    
    .pet-type-item {
      background: #f5f5f5;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      
      .pet-emoji {
        font-size: 32px;
        display: block;
        margin-bottom: 8px;
      }
      
      .pet-type-name {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style> 